<template>
  <view class="oa-proposed-bg"></view>
  <view class="oa-proposed app-container flex flex-column">
    <view class="proposed-title flex-shrink-0">华信OA管理系统</view>
    <view class="oa-proposed-search flex-shrink-0">
      <d-input v-model="inputVal" placeholder="请输入要搜索的事项">
        <template #prefix>
          <image class="icon-search" :src="SearchPng"></image>
        </template>
        <template #suffix>
          <view>
            <text class="search-split">|</text>
            <text class="search-text">搜索</text>
          </view>
        </template>
      </d-input>
    </view>
    <view class="flex-grow-1 oa-proposed__main">
      <d-scroll-view  @refresherrefresh="onRefresh" :refresher-triggered="triggered">
        <view style="padding: 20rpx; min-height: 100%; box-sizing: border-box">
          <d-card class="oa-proposed-card">
            <view class="op-card-title">财务应用</view>
          </d-card>
          <d-card class="oa-proposed-card">
            <view class="op-card-title">行政事务</view>
          </d-card>
        </view>
      </d-scroll-view>
    </view>
  </view>
</template>

<script setup lang="ts">
import SearchPng from '@/static/images/oa/search.svg'
defineOptions({ name: 'OaHomeProposed' })

const inputVal = ref<string>();
const triggered = ref<boolean>(false);

function onRefresh() {
  triggered.value = true;
  setTimeout(() => {
    triggered.value = false;
  }, 2000)
}

</script>

<style scoped lang="scss">
@import 'src/styles/bg/proposedBg';

.oa-proposed-bg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  background-image: $--oa-proposed-bg;
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: top center;
}

:deep(.uni-input-placeholder.input-placeholder) {
  font-size: 32rpx;
  color: rgba(255, 255, 255, 0.5);
}

:deep(.uni-input-input) {
  color: #fff;
  font-size: 32rpx;
}

.oa-proposed {
  position: relative;
  z-index: 9;

  .oa-proposed__main {
    margin-top: 40rpx;

    .oa-proposed-card {
      margin-top: 20rpx;

      .op-card-title {
        font-size: 36rpx;
        font-weight: bold;
        line-height: normal;
        letter-spacing: 0em;
        color: #333333;
      }

      &:first-child {
        margin-top: 0;
      }
    }
  }

  .proposed-title {
    //margin-top: 40rpx;
    font-size: 44rpx;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 0em;
    color: #FFFFFF;
    text-align: center;
  }

  .oa-proposed-search {
    max-width: 568rpx;
    margin: 44rpx auto 0;

    .icon-search {
      width: 48rpx;
      height: 48rpx;
      margin-right: 18rpx;
    }

    .search-split {
      margin: 0 24rpx;
      color: rgba(255, 255, 255, 0.2);
    }

    .search-text {
      font-size: 32rpx;
      color: #FFFFFF;
    }
  }
}
</style>
